<template>
  <div class="white_div">
    <h2>个人信息表</h2>
    <!-- <p>{{ loginUser }}</p> -->
    <el-radio-group size="medium">
      <div style="margin: 20px"></div>

      <el-form label-position="left" label-width="10.417vw" :model="loginUser">
        <el-form-item >
          <label slot="label">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label>  
          <el-input v-model="loginUser.userId" readonly></el-input>
        </el-form-item>
        <el-form-item >
          <label slot="label">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</label> 
          <el-input v-model="loginUser.userTel"></el-input>
        </el-form-item>
        <el-form-item >
          <label slot="label">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</label> 
          <el-input v-model="loginUser.userName"></el-input>
        </el-form-item>
        <el-form-item >
          <label slot="label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label>  
          <el-input v-model="loginUser.userSex"></el-input>
        </el-form-item>
        <el-form-item label="注册地点：">
          <el-input v-model="loginUser.userLocation"></el-input>
        </el-form-item>
        <el-form-item label="注册时间：">
          <el-input v-model="loginUser.userTime" readonly></el-input>
        </el-form-item>
        <el-form-item label="用户类型：">
          <el-input v-model="loginUser.userType" readonly></el-input>
        </el-form-item>
        <el-form-item >
          <label slot="label">会&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;员：</label> 
          <el-input v-model="loginUser.userVip" readonly></el-input>
        </el-form-item>
        <el-form-item label="靶场积分：">
          <el-input v-model="loginUser.userJifen1" readonly></el-input>
        </el-form-item>
        <el-form-item label="CTF积分：">
          <el-input v-model="loginUser.userJifen2" readonly></el-input>
        </el-form-item>
        <el-form-item >
          <label slot="label">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</label> 
          <el-input v-model="loginUser.userStatus" readonly></el-input>
        </el-form-item>
        <el-form-item >
          <label slot="label">资&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产：</label> 
          <el-input v-model="loginUser.userProperty" readonly></el-input>
        </el-form-item>
        <el-form-item >
          <label slot="label">头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像：</label> 
          <el-upload
              class="upload-demo"
              action="http://172.16.13.212:8090/uploadoss"
              :on-remove="handleRemove"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <el-button size="small" type="primary" class="push"
                >点击上传</el-button
              >
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          <el-image :src="loginUser.userSrc" class="avatar" ></el-image>
          <!-- </el-upload> -->
        </el-form-item>
      </el-form>
    </el-radio-group>
    <div>
       <el-button type="success" @click="addPerApi">修改信息</el-button>
    </div>
     
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapMutations: mapuserinfomutation, mapState: mapuserinfostate } =
  createNamespacedHelpers("userinfo");

const {  mapMutations } = createNamespacedHelpers("tags");
export default {
  data() {
    return {
      updateUser: {
        userId:"",
        userTel: "",
        userName: "",
        userSex: "",
        // userJifen1: "",
        // userJifen2: "",
        userSrc: "",
        // userType: "",
        // userVip: "",
        // userTime: "",
        userLocation: "",
      },
    };
  },
  methods: {
    ...mapMutations(["addTabs"]),
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleAvatarSuccess(val) {
      console.log("图片", val.message);
      this.updateUser.userSrc = val.message;
      this.loginUser.userSrc = val.message;
    },
    beforeAvatarUpload(file) {
      const isJPGaPNG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPGaPNG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      console.log("aaaaa", isLt2M);
      return isLt2M && isJPGaPNG;
    },
    async addPerApi() {
      console.log("修改后的数据", this.loginUser);
      this.updateUser.userId = this.loginUser.userId
      this.updateUser.userTel = this.loginUser.userTel
      this.updateUser.userName = this.loginUser.userName
      this.updateUser.userSex = this.loginUser.userSex
      // this.updateUser.userSrc = this.loginUser.userSrc
      this.updateUser.userLocation = this.loginUser.userLocation
      console.log("传递的数据", this.updateUser);
      const result = await this.$api.person.updateperson(this.updateUser);
      console.log("results", result);
      if (result.code) {
        this.$message.success(result.message);
      }
    },
  },
  beforeRouteEnter(to,from,next){
        next(vm=>{
           vm.addTabs(to)
        })
 },
  computed: {
    ...mapuserinfostate(["loginUser"]),
  },
};
</script>

<style scoped lang="scss">
.el-input {
  width: 31.25vw;
}
.el-form-item__label {
  width: 15.625vw;
}
.el-form-item {
  width: 41.667vw;
  font-size: 1.563vw;
  font-weight: 36.458vw;
}
.ava {
  margin-right: 26.042vw;
}
.avatar-uploader ::v-deep .el-upload {
  border: 0.052vw dashed #d9d9d9;
  border-radius: 0.313vw;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader ::v-deep .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 1.458vw;
  color: #8c939d;
  width: 9.271vw;
  height: 9.271vw;
  text-align: center;
  line-height: 9.271vw;
  border: 0.052vw solid #8c939d;
}
.avatar {
  width: 9.271vw;
  height: 9.271vw;
  display: block;
}
.btn {
  margin: 1.563vw;
}
.white_div {
  background-color: white;
  padding: 2.6042vw;
}
</style>
